<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin="anonymous" integrity="sha512-UN8wX5Zf4Af6/2UJOYTYyWLHdua4SWMd1pnIxNoDCtqdaAMk1TQdvwwgoG7ShvuOS1d9jCerLNzwfvRmL7N4iA==" src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="${pageContext.request.contextPath}/statics/echarts/theme.js"></script>


  <title>红旗景点</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      width: 100%;
    }

    .box {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
<!-- 1.准备一个具备大小的 DOM 容器 -->
<div class="box"></div>


<script>
  // 2.初始化echarts实例化对象
  var myChart = echarts.init(document.querySelector('.box'), 'vintage');

  // var myData = ['大栅栏', '天安门', '故宫', '景山', '北海公园', '后海', '什刹海', '西单', '玉渊潭', '中央电视塔', '东单', '王府井', '南锣鼓巷', '工体', '潘家园', '琉璃厂'];
  var myData = ['青年洞', '络丝潭', '太行三', '团结洞', '一线天', '大般若寺', '琉璃光寺', '红旗渠纪念馆', '凤凰台', '鹊桥', '观光台', '双锁关', '虎口崖', '十水言碑', '神龟洞', '浊漳河'];
  var databeast = {
    1: [389, 259, 262, 324, 232, 176, 196, 214, 133, 370, 268, 360, 185, 392, 392, 153],
    2: [111, 315, 139, 375, 204, 352, 163, 258, 385, 209, 209, 243, 204, 352, 163, 258],
    3: [227, 210, 328, 292, 241, 110, 130, 185, 392, 392, 153, 187, 150, 200, 250, 300],
    4: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    5: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163],
    6: [121, 388, 233, 309, 133, 308, 297, 283, 349, 273, 229, 238, 224, 291, 185, 203],
    7: [200, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    8: [380, 129, 173, 101, 310, 393, 386, 296, 366, 268, 208, 149, 356, 239, 208, 330],
    9: [363, 396, 388, 108, 325, 120, 180, 292, 200, 309, 223, 236, 209, 271, 215, 216],
    10: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163],

  };
  var databeauty = {
    1: [121, 388, 233, 309, 133, 308, 297, 283, 349, 273, 229, 238, 224, 291, 185, 203],
    2: [200, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    3: [380, 129, 173, 101, 310, 393, 386, 296, 366, 268, 208, 149, 356, 239, 208, 330],
    4: [363, 396, 388, 108, 325, 120, 180, 292, 200, 309, 223, 236, 209, 271, 215, 216],
    5: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    6: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    7: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163],
    8: [389, 259, 262, 324, 232, 176, 196, 214, 133, 370, 268, 360, 185, 392, 392, 153],
    9: [111, 315, 139, 375, 204, 352, 163, 258, 385, 209, 209, 243, 204, 352, 163, 258],
    10: [227, 210, 328, 292, 241, 110, 130, 185, 392, 392, 153, 187, 150, 200, 250, 300],
    11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
    12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163],

  };
  var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  option = {
    baseOption: {
      backgroundColor: '#000',
      timeline: {
        show: true,
        axisType: 'category',
        tooltip: {
          show: true,
          formatter: function(params) {
            console.log(params);
            return params.name + '月份数据统计';
          }
        },
        autoPlay: true,
        currentIndex: 6,
        playInterval: 1000,
        label: {
          normal: {
            show: true,
            interval: 'auto',
            formatter: '{value}月',
          },
        },
        data: [],
      },
      title: {
        //   text:'',
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        subtext: '',
      },
      legend: {
        data: ['帅哥', '美女'],
        top: 4,
        right: '20%',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: '{b}<br/>{a}: {c}人',
        axisPointer: {
          type: 'shadow',
        }
      },

      toolbox: {
        right: 20,
        feature: {
          saveAsImage: {
            title: '保存为图片',
          },
          restore: {
            title: '配置项还原'
          },
          dataView: {
            title: '数据视图',
            lang: ['数据视图','关闭','刷新'],
            textareaBorderColor: "rgba(218, 18, 18, 1)",
            textColor: "rgba(234, 95, 95, 1)"
          },
          dataZoom: {
            title: {
              zoom: '区域缩放',
              back: '缩放还原'
            }
          },
          magicType: {
            type: ['line', 'bar','stack'],
            title: {
              line: '切换为折线图',
              bar: '切换为柱状图',
              stack: '切换为堆叠图'
            }
          },
          // brush: {},
        }
      },

      grid: [{
        show: false,
        left: '4%',
        top: 60,
        bottom: 60,
        containLabel: true,
        width: '46%',
      }, {
        show: false,
        left: '50.5%',
        top: 80,
        bottom: 60,
        width: '0%',
      }, {
        show: false,
        right: '4%',
        top: 60,
        bottom: 60,
        containLabel: true,
        width: '46%',
      }, ],

      xAxis: [{
        type: 'value',
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        position: 'top',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B2B2B2',
            fontSize: 12,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#1F2022',
            width: 1,
            type: 'solid',
          },
        },
      }, {
        gridIndex: 1,
        show: false,
      }, {
        gridIndex: 2,
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        position: 'top',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B2B2B2',
            fontSize: 12,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#1F2022',
            width: 1,
            type: 'solid',
          },
        },
      }, ],
      yAxis: [{
        type: 'category',
        inverse: true,
        position: 'right',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          margin: 8,
          textStyle: {
            color: '#9D9EA0',
            fontSize: 12,
          },

        },
        data: myData,
      }, {
        gridIndex: 1,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#9D9EA0',
            fontSize: 12,
          },

        },
        data: myData.map(function(value) {
          return {
            value: value,
            textStyle: {
              align: 'center',
            }
          }
        }),
      }, {
        gridIndex: 2,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: '#9D9EA0',
            fontSize: 12,
          },

        },
        data: myData,
      }, ],
      series: [],

    },

    options: [],


  };

  for (var i = 0; i < timeLineData.length; i++) {
    option.baseOption.timeline.data.push(timeLineData[i]);
    option.options.push({
      title: {
        text: '红旗渠' + timeLineData[i] + '月各景点人数',
      },
      series: [{
        name: '男',
        type: 'bar',
        barGap: 20,
        barWidth: 20,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            position: 'left',
            offset: [0, 0],
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            color: '#659F83',
          },
          emphasis: {
            color: '#08C7AE',
          },
        },
        data: databeast[timeLineData[i]],
      },


        {
          name: '女',
          type: 'bar',
          barGap: 20,
          barWidth: 20,
          xAxisIndex: 2,
          yAxisIndex: 2,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
              position: 'right',
              offset: [0, 0],
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
          },
          itemStyle: {
            normal: {
              color: '#F68989',
            },
            emphasis: {
              color: '#F94646',
            },
          },
          data: databeauty[timeLineData[i]],
        }
      ]
    });
  }

  myChart.setOption(option);
</script>
</body>

</html>